<template>
  <div>
    <div style="padding: 16px 24px; background-color: #ffffff">
      <div style="margin-bottom: 16px">预警联系方式（短信）</div>
      <div>
        <div style="width: 192px;height: 66px;border: 1px #dddddd dashed;text-align: center">
          <a style="line-height: 66px;font-size: 14px" @click="showModal">+ 添加</a>
        </div>
      </div>
    </div>
    <div style="padding: 16px 24px; background-color: #ffffff;margin-top: 16px">
      <div style="margin-bottom: 16px">预警设置</div>
      <div style="border: 1px #dddddd solid;border-radius: 4px;padding: 16px 20px">
        <span style="color: #0D0D0D;font-size: 16px">库存预警</span> <span style="color: #BBBDBF;font-size: 12px">商品库存为0即进行预警</span>
        <a-switch checked-children="开启" un-checked-children="关闭" style="float: right"/>
      </div>
      <div style="border: 1px #dddddd solid;border-radius: 4px;padding: 16px 20px; margin-top: 16px">
        <span style="color: #0D0D0D;font-size: 16px">全局热卖预警</span> <span style="color: #BBBDBF;font-size: 12px">当日店铺任意商品累计售卖数超过预警值开始预警</span>
        <span style="float: right"><a @click="showModal1">预警值：{{ val }} </a>
          <a-switch checked-children="开启" un-checked-children="关闭"/>
        </span>
        <a-divider/>
        <div style="margin-bottom: 16px;overflow: hidden">
          <span style="color: #bbbbbb;font-size: 16px">
            商品热卖预警
          </span>
          <a-radio-group :value="size" style="float: right">
            <a-radio-button value="large">
              + 添加
            </a-radio-button>
          </a-radio-group>
        </div>
        <a-table :columns="columns" :data-source="data"></a-table>
      </div>
    </div>
    <a-modal v-model="visible" title="Title" on-ok="handleOk">
      <template slot="footer">
        <a-button key="submit" type="primary" :loading="loading" @click="handleOk">
          添加
        </a-button>
        <a-button key="back" @click="handleCancel">
          返回
        </a-button>
      </template>
      <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 16 }">
        <a-form-item label="手机号">
          <a-input-search>
            <a-button slot="enterButton">
              发送验证码
            </a-button>
          </a-input-search>
        </a-form-item>
        <a-form-item label="验证码">
          <a-input/>
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal v-model="visible1" title="Title" on-ok="handleOk1">
      <template slot="footer">
        <a-button key="back" @click="handleCancel1">
          取消
        </a-button>
        <a-button key="submit" type="primary" :loading="loading" @click="handleOk1">
          确认
        </a-button>
      </template>
      <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 16 }">
        <a-form-item label="预警值">
          <a-input v-model="val"/>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
const columns = [
  {
    title: '商品名称',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '商品ID',
    dataIndex: 'age',
    key: 'age'
  },
  {
    title: '预警值',
    dataIndex: 'address',
    key: 'address 1'
  },
  {
    title: '商品状态',
    dataIndex: 'address',
    key: 'address 2'
  },
  {
    title: '操作',
    dataIndex: 'address',
    key: 'address 3'
  }
]
const data = []
export default {
  name: 'SaleWaring',
  data () {
    return {
      size: 'large',
      visible: false,
      visible1: false,
      val: 2000,
      data,
      columns
    }
  },
  methods: {
    showModal () {
      this.visible = true
    },
    handleOk (e) {
      this.visible = false
    },
    handleCancel (e) {
      this.visible = false
    },
    showModal1 () {
      this.visible1 = true
    },
    handleOk1 (e) {
      this.visible1 = false
    },
    handleCancel1 (e) {
      this.visible1 = false
    }
  }
}
</script>

<style scoped>

</style>
